<!--
 * @Author: FengTeng
 * @Date: 2021-02-20 09:26:59
 * @LastEditTime: 2021-03-02 14:49:25
 * @LastEditors: FengTeng
 * @Description: Description
 * @FilePath: \spa-manage\src\components\modal\create-product-modal\CreateProductModal.vue
-->
<template>
  <div class="create-product-modal" :class="{ 'z-index': !modalConfig.visible }">
    <spa-modal :modalConfig="modalConfig" @dialog-close="handleDialogClose()">
      <el-form :rules="productFormConfig.rules" ref="productFormRef" :model="productFormData">
        <el-form-item label="商品名称" prop="productName">
          <el-input v-model="productFormData.productName" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品类型" prop="productType">
          <el-select
            v-model="productFormData.productType"
            @change="handleProductTypeChange()"
            :popper-append-to-body="false"
            placeholder="请选择商品类型"
          >
            <el-option label="服务" value="服务"></el-option>
            <el-option label="产品" value="产品"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格" prop="productPrice">
          <el-input
            type="number"
            v-model="productFormData.productPrice"
            @input="numberPriceChange($event)"
            placeholder="请输入商品价格"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="productNumber">
          <el-input
            type="number"
            v-model="productFormData.productNumber"
            @input="numberNumberChange($event)"
            placeholder="请输入商品数量"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品负责人" prop="productDirector">
          <el-select
            v-model="productFormData.productDirector"
            @change="handleProductDirectorChange()"
            :popper-append-to-body="false"
            placeholder="请选择商品负责人"
          >
            <el-option
              v-for="director in productDirectors"
              :label="director.name"
              :value="director.name"
              :key="director.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="form-option-button">
          <el-button type="info" @click="handleCancel()">取消</el-button>
          <el-button type="primary" :loading="confirmBtnLoading" @click="handleConfirm()">确定</el-button>
        </el-form-item>
      </el-form>
    </spa-modal>
  </div>
</template>

<script>
import $ from "jquery";
import apis from "@/apis/index.js";
import SpaModal from "@/components/spa-modal/SpaModal.vue";
export default {
  name: "CreateProductModal",
  components: {
    SpaModal
  },
  props: {
    modalConfig: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      productFormData: {
        productName: "",
        productType: "",
        productPrice: "",
        producNumber: "",
        productDirector: ""
      },
      productFormConfig: {
        rules: {
          productName: [{ required: true, message: "请输入商品名称！", trigger: "blur" }],
          productType: [{ required: true, message: "请选择商品类型！", trigger: "blur" }],
          productPrice: [{ required: true, message: "请输入商品价格！", trigger: "blur" }],
          productNumber: [{ required: true, message: "请输入商品数量！", trigger: "blur" }],
          productDirector: [{ required: true, message: "请选择商品负责人！", trigger: "blur" }]
        }
      },
      productDirectors: [],
      confirmBtnLoading: false,
      numberValidTimer: null
    };
  },
  methods: {
    openModal() {
      this.requestProductsDirectors();
      this.modalConfig.visible = true;
    },
    requestProductsDirectors() {
      let that = this;
      $.post(apis.getProductsDirectors, {
        type: "select1"
      }, resp => {
        resp = JSON.parse(resp);
        if (resp.code === "ok") {
          that.productDirectors = [...resp.data];
        } else {
          this.$message.error(resp.msg);
        }
      })
    },
    handleProductTypeChange() {
      this.formItemValidate("productType");
    },
    handleProductDirectorChange() {
      this.formItemValidate("productDirector");
    },
    handleConfirm() {
      console.log("提交表单");
      this.confirmBtnLoading = true;
      if (this.formDataValidate()) {
        $.post(
          apis.createNewProduct,
          {
            name: this.productFormData.productName,
            leixin: this.productFormData.productType,
            jiage: this.productFormData.productPrice,
            number: this.productFormData.productNumber,
            fuzeren: this.productFormData.productDirector,
            type: "insert"
          },
          resp => {
            resp = JSON.parse(resp);
            if (resp.code === "ok") {
              this.$message.success(resp.msg);
              this.modalConfig.visible = false;
              this.$emit("refresh-table");
            } else {
              this.$message.error(resp.msg);
            }
            this.confirmBtnLoading = false;
          }
        );
      }
    },
    handleCancel() {
      this.modalConfig.visible = false;
      this.resetFormData();
    },
    handleDialogClose() {
      this.resetFormData();
    },
    numberPriceChange(event) {
      this.productFormData.productPrice = this.numberValueChange(event, 0, 9999999);
    },
    numberNumberChange(event) {
      this.productFormData.productNumber = this.numberValueChange(event, 0, 9999999);
    },
    numberValueChange(event, min, max) {
      let number = Number(event);
      if (min !== undefined) {
        if (number < min) {
          number = min;
          this.$message.warning("最小值为：" + min);
        }
      }
      if (max !== undefined) {
        if (number > max) {
          number = max;
          this.$message.warning("最大值为：" + max);
        }
      }
      return number.toString();
    },
    formDataValidate() {
      let valid = false;
      this.$refs.productFormRef.validate(_valid => {
        valid = _valid ? true : false;
        return valid;
      });
      return valid;
    },
    formItemValidate(prop) {
      this.$refs.productFormRef.validateField(prop, error => {
        if (error) {
          console.error(prop + "未通过校验！");
        }
      });
    },
    resetFormData() {
      console.log("重置表单");
      this.productFormData = {
        productName: "",
        productType: "请选择商品类型",
        productPrice: "",
        producNumber: "",
        productDirector: ""
      };
      this.confirmBtnLoading = false;
      this.$refs.productFormRef && this.$refs.productFormRef.resetFields();
    }
  }
};
</script>

<style lang="scss" src="./index.scss"></style>
